<template>
    <div class="leftOne">
        <ThemeTitlenew :title="title" />
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="" />
            </div>
            <div class="landDetail" ref="landDetail">
                <div class="title" @click="allArea" id="countArea">陆地总面积</div>
                <div class="num">
                    <div class="" v-for="(item, index) in numList" :key="index">
                        {{ item }}
                    </div>
                    <div>万km²</div>
                </div>
            </div>
        </div>
        <div class="islandAndSea">
            <div
                class="islandArea"
                v-for="(item, index) in islandList"
                :key="index"
                @click="showBase(index)"
            >
                <div class="landName" :id="'landName'+index">{{ item.name }}</div>
                <div
                    class="landVal"
                    :class="{ yColor: index % 2 == 0, rColor: index % 2 !== 0 }"
                >
                    {{ item.val }}
                </div>
            </div>
            <!-- <div class="seaArea">
                <div class="seaName">海域面积</div>
                <div class="seaVal">53,114㎡</div>
            </div> -->
        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="geoIntroWord">地理介绍</div>
            </div>
            <div class="geoCarousel">
                <el-carousel trigger="click" indicator-position="outside" loop="false" arrow="always">
                    <el-carousel-item v-for="item in carouselList" :key="item">
                        <div class="carouseContent">
                            <div class="carouseImg">
                                <img :src="item.imgSrc" alt="" />
                            </div>
                            <div class="carouseWord">
                                {{ item.dec }}
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <transition name="slide">
            <div class="right-detail-info" v-show="$store.state.descShow" v-html="textString">
            </div>
        </transition>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { onMounted, ref, provide, nextTick } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { addLayerImage,removeLayerByName} from '@/cesiumPlugin/layer'
export default {
    components: {
        ThemeTitlenew,
    },
    setup() {
        const title = provide("title", "自然地理");
        const store = useStore();
        const landDetail = ref(null);
        let numList =ref([3,".",5,4])
        let textString = ref("");
        let status1 = ref(0)
        let status2 = ref(0)
        let status3 = ref(0)
        let status4 = ref(0)
        const zongText =
            "海南省 ，简称“琼”，是中华人民共和国最南端的省级行政区 ，省会海口。海南省陆地总面积3.54万平方公里，其中海南岛3.39万平方公里，海域面积约200万平方公里。<br>2019年共发生突发事件<span>265</span>起，造成<span>248</span>人死亡，2020年共发生突发事件<span>371</span>起，造成<span>339</span>人死亡，同比增加<span>106</span>起（40.4%)，死亡增加<span>91</span>起(36.7%)。<br>2020年共发生事故灾难<span>209</span>起，造成<span>216</span>人死亡，<span>142</span>人受伤，<span>7</span>人失踪。<br>2020年共发生社会安全事件<span>99</span>起，造成<span>109</span>人死亡。";
        const hainandaoText =
            "海南岛轮廓形似一个椭圆形大雪梨，地势四周低平，中间高耸，呈穹隆山地形，以五指山、鹦哥岭为隆起核心，向外围逐级下降，由山地、丘陵、台地、平原等地貌构成。海南属热带季风气候，全年暖热，雨量充沛。";
        const qitadaoyu =
            "西沙群岛、中沙群岛、南沙群岛的岛礁及其海域，陆地面积20多平方公里"; //总面积200多万平方公里
        const haianxiantext =
            "海南岛约有长度为1823公里长的海岸线，其中自然岸线约为1227公里，剩余公里数为人工岸线";

        let currentGeojson = "";
        let isClick = ref(0);
        let isItemClick = ref(-1);
        //let descShow = ref(false)
        const carouselList = [
            {
                imgSrc: "/data/images/hngk/地理.jpg",
                dec: "海南省，简称琼。位于中国的最南端，全省包括海南岛和中沙、西沙、南沙群岛及其周围广阔的海域, 是中国最大的海洋省，最小的陆地省,是我国仅次于台湾岛的第二大岛",
            },
            {
                imgSrc: "/data/images/hngk/自然资源1.jpg",
                dec: "海南岛土地面积约占全国热带土地面积的42.5%，海南是热带雨林、热带季风雨林的原生地，森林覆盖率达25%以上。我国发展热带海洋渔业的理想之地，其中亚洲最大的富铁矿在海南石碌",
            },
            {
                imgSrc: "/data/images/hngk/民族.jpg",
                dec: "海南省是多民族聚居地，现有常住人口714万人，共有37个民族、汉族、黎族、苗族、回族是世居民族，其中少数民族人口达124万人，黎族占114万人，是我国黎族仅有的分布地区。",
            },
        ];
        const islandList = [
            { name: "海南岛", val: "3.39万km²" },
            { name: "其他岛屿", val: "0.15万km²" },
            // { name: "海域面积", val: "200万km²" },
            { name: "岸线长度", val: "1823km" },
        ];
        function allArea() {
            if(isClick._value == 0){
                // 是中国的经济特区、自由贸易试验区。地处中国华南地区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。
                var a =  document.getElementById("countArea")
                a.style.color="#01c7ff"
                isClick._value = 1
                layerManager.removeAll();
                store.commit("changeDescShow", true);
                textString.value = zongText;
                layerManager.addGeojson(`./data/geojson/全部岛屿_市界.json`);
                layerManager.addGeojson(
                    `./data/geojson/十段线.json`,
                    "rgba(255,0,0)"
                );
                layerManager.currentGeoJson = `./data/geojson/全部岛屿_市界.json`;
                layerManager.fly(
                    113.51429285870633,
                    16.5439485370261,
                    5518927,
                    6.265629415248172,
                    -1.5700056818034307,
                    0
                );
            }else if(isClick._value == 1){
                layerManager.removeAll();
                var a =  document.getElementById("countArea")
                a.style.color="#ffffff"
                isClick._value = 0
                store.commit("changeDescShow", false);
            }
        }
        function descShowFun() {
            removeLayerByName("海南本岛")
            store.commit("changeDescShow", true);
            setTimeout(() => {
                //store.commit("changeDescShow", false);
            }, 7000);
        }
        function showBase(index) {
            layerManager.removeAll();
            if (index == 0) {
                if(status1._value== 0){
                    descShowFun();
                    textString.value = hainandaoText;
                    bendao();
                    console.log(index)
                    var a =  document.getElementById("landName0")
                    a.style.color="#01c7ff"
                    status1._value = 1
                }else if(status1._value == 1){
                    layerManager.removeAll();
                    store.commit("changeDescShow", false);
                     removeLayerByName("海南本岛")
                     var a =  document.getElementById("landName0")
                    a.style.color="#ffffff"
                    status1._value =0
                }
            } else if (index == 1) {
                  if(status2._value== 0){
                    descShowFun();
                    textString.value = qitadaoyu;
                    qitadao();
                    var a =  document.getElementById("landName1")
                    a.style.color="#01c7ff"
                    status2._value =1
                }else if(status2._value== 1){
                    descShowFun();
                    store.commit("changeDescShow", false);
                     var a =  document.getElementById("landName1")
                    a.style.color="#ffffff"
                    status2._value =0
                }
            } else if (index == 2) {
                if(status3._value== 0){
                    descShowFun();
                    textString.value = haianxiantext;
                    anxian();
                    var a =  document.getElementById("landName2")
                    a.style.color="#01c7ff"
                    status3._value =1
                }else if(status3._value== 1){
                    descShowFun();
                     store.commit("changeDescShow", false);
                     var a =  document.getElementById("landName2")
                    a.style.color="#ffffff"
                    status3._value =0
                }
            } 
            // else if (index == 3) {
            //     if(status4._value== 0){
            //         descShowFun();
            //         textString.value = haianxiantext;
            //         anxian();
            //         var a =  document.getElementById("landName3")
            //         a.style.color="#01c7ff"
            //         status4._value =1
            //     }else if(status4._value== 1){
            //         descShowFun();
            //          store.commit("changeDescShow", false);
            //          var a =  document.getElementById("landName3")
            //         a.style.color="#ffffff"
            //         status4._value =0
            //     }
            // }
        }
        function bendao() {
            // layerManager.addGeojson(`./data/geojson/本岛市县界.json`);
            // layerManager.currentGeoJson = `./data/geojson/本岛市县界.json`;
            layerManager.fly(109.8976359396365,16.92363013852743,337051,6.215216628488726,-0.9212251504110252,0.000021543471909524214)
                 let config={
                  name:"海南本岛",
                  wmtsUrl:"http://59.212.37.22/mapserver/vmap/WMTS/1.0/ADMI_DIVI_A/46010101",
                  layer:"ADMI_DIVI_A",
                  style: "default",
                  format: "image/png",
                  tileMatrixSetID: "default028mm",
              }
            addLayerImage(config)
        }
        function haiyu() {
            removeLayerByName("")
            ElMessage.warning({
                message: "暂无数据",
                type: "warning",
            });
        }
        function qitadao() {
            layerManager.addGeojson(`./data/geojson/cityOrCounty/三沙市.json`);
            layerManager.currentGeoJson = `./data/geojson/cityOrCounty/三沙市.json`;
            layerManager.fly(
                114.69682821900491,
                0.2615449749823311,
                1966935,
                6.200096068595576,
                -0.9816728571033337,
                0.0014778671086723705
            );
        }
        function anxian() {
            layerManager.fly(
                109.8976359396365,
                16.92363013852743,
                337051,
                6.215216628488726,
                -0.9212251504110252,
                0.000021543471909524214
            );
            axios.get("./data/geojson/单海南省界.json").then((res) => {
                let arr = res.data.geometries[0].coordinates[0];
                let arr1 = [].concat.apply([], arr);
                viewer.entities.add({
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(arr1),
                        clampToGround: false,
                        width: 5,
                        material: new Cesium.PolylineOutlineMaterialProperty({
                            color: Cesium.Color.fromCssColorString(
                                "rgba(115,227,230,1)"
                            ).withAlpha(1),
                            outlineWidth: 0,
                            outlineColor: Cesium.Color.BLACK.withAlpha(0),
                        }),
                    },
                });
                // fmh.addPolyline({ //只加入常用的属性，可以在源码中加入其他属性，以下类似。
                //     flowing: true,
                //     flowImage: "../libs/ysCesium/images/colors1.png",//飞行线的图片
                //     options: {
                //         id:'haianxian',
                //         name: 'yscNoNeedEntity',
                //         polyline: {
                //             //positions: Cesium.Cartesian3.fromDegreesArrayHeights(arr),
                //             positions: Cesium.Cartesian3.fromDegreesArray(arr1),
                //             width:5,
                //             clampToGround : true,//贴地
                //             material:Cesium.Color.YELLOW,
                //             interval: 3000
                //         }
                //     }
                // });
            });
        }
        function initcountArea(){
            axios({
			     	url: 'http://172.25.110.34/api/emergency-visual/cehuiju/v2/zrdl',
			     	method: 'get',
			     }).then((res) => {
                     if(res.data.code == 200){
                         var str = parseFloat(res.data.data.zmj)*10000 + ''
                         var newstr = str.split("")
                        //  numList.value  = newstr
                     }
			     })
                // .catch((res)=>{
                //     ElMessage.error('自然地理接口错误');
                // })
        }
        onMounted(() => {
            initcountArea()
            var left = window.document.getElementsByClassName("el-carousel__arrow--left")
            if(left){
              left.forEach((ele)=>{
               ele.style.display = "none"
              })
            }
           var right = window.document.getElementsByClassName("el-carousel__arrow--right")
           if(right){
             right.forEach((ele)=>{
              ele.style.display = "none"
             })
           }
            // console.log(landDetail._value.innerHTML)
        });

        return {
            numList,
            carouselList,
            title,
            islandList,
            isClick,
            //methods
            allArea,
            showBase,
            isItemClick,
            status1,
            status2,
            status3,
            status4,
            textString,
            descShowFun,
            landDetail,
        };
    },

};
</script>
<style>
@keyframes slideIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.slide-enter-active {
    animation: slideIn 0.5s;
}
.slide-leave-active {
    animation: slideOut 0.5s;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftOne >>> .el-carousel__container {
        height: 148px;
    }
    .leftOne {
        .landArea {
            width: vw(365);
            height: vh(132);
            margin-top: vh(25);
            background: url('/data/images/hngk/自然地理.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw(37) vh(28) vw(33);
            display: flex;
            align-items: center;
         
            .landIcon {
                margin-right: vw(30);
                // background:blue;
            }

            .landDetail {
                width: vw(300);
                // background:pink;
                .title {
                    font-size: vw(18);
                    cursor: pointer;
                    transition: all 0.5s ease-in-out;
                }

                .title:hover {
                    color: #00e5fd;
                }

                .num {
                    display: flex;
                    justify-content: space-between;
                    margin-top: vh(17);
                    div {
                        flex-shrink: 0;
                        width: vw(40);
                        height: vh(45);
                        line-height: vh(45);
                        font-size: vw(26);
                        background: url('/data/images/hngk/num.png') no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                    }

                    div:last-child {
                        font-size: vw(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw(50);
                    }
                }
            }
        }

        .islandAndSea {
            width: vw(364);
            height: vh(100);
            margin-top: vh(17);
            display: flex;
            justify-content: space-between;
            // background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;

            .islandArea {
                width: vw(90);
                height: vh(100);
                text-align: center;

                .landName {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(14);
                    cursor: pointer;
                }

                .landName:hover {
                    color: #00e5fd;
                }

                .landVal {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(15);
                }

                .yColor {
                    color: #00E5FD;
                }

                .rColor {
                    color: #00E5FD;
                }
            }
        }

        .right-detail-info {
            position: fixed;
            width: vw(850);
            // height: vh(180);
            color: #02C7FF;
            font-family: '微软雅黑';
            // text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
            padding-top: vh(20);
            padding-bottom:vh(20);
            right: vw(430);
            /* top: 80px; */
            top: vh(100);
            background-color: rgba(5, 26, 37, 0.3);
            border-radius: 15px;
            font-size: vw(22);
            line-height: vh(35);
            padding-left: 8px;
            padding-right: 8px;
            transition: top 1s;
        }
        .right-detail-info >>> span{
            color:#ffff02
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(28);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .geoCarousel {
                width: vw(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw(8);
                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw(163);
                        height: vh(135);
                        margin-right: vw(12);

                        img {
                            width: vw(163);
                            height: vh(135);
                        }
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw(168);
                        height: vh(139);
                        font-size: vw(14);
                        padding: vh(12) vw(0);
                        line-height: vh(17);
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftOne {
        height: vh(995);
        // background:black;
        position:absolute;
        top:vh(100);
        left:vw1(37);
        .landArea {
            width: vw1(413);
            height: vh(196);
            margin-top: vh(25);
            background: url('/data/images/hngk/矩形.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(25) vw1(37) vh(28) vw1(33);
            display: flex;
            align-items: center;
            margin-right: vw1(53);
            margin-bottom: vh(50);

            .landIcon {
                margin-right: vw1(30);
                width:vw1(53);
                img{
                    width:vw1(60);
                    height:vh(75)
                }
            }
            .landDetail {
                width: vw1(250);
                height:vh(80); 
                margin-top vh(-10);
                .title {
                    font-size: vw1(23);
                    cursor: pointer;
                    transition: all 0.5s ease-in-out;
                }

                .title:hover {
                    color: #00e5fd;
                }

                .num {
                    display: flex;
                    justify-content: space-between;
                    margin-top: vh(30);
                    div {
                        flex-shrink: 0;
                        width: vw1(29);
                        height: vh(45);
                        line-height: vh(45);
                        font-size: vw1(26);
                        background: url('/data/images/hngk/num.png') no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                    }

                    div:last-child {
                        font-size: vw1(16);
                        background: none;
                        flex-shrink: 0;
                        width: vw(18);
                    }
                }
            }
        }

        .islandAndSea {
            width: vw1(413);
            height: vh(220);
            margin-top: vh(15);
            display: flex;
            justify-content: space-between;
            // background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: vh(50);
            padding:vh(7);
            box-sizing :border-box;

            .islandArea {
                width: vw1(90);
                height: vh(100);
                text-align: center;

                .landName {
                    line-height: vh(110);
                    width: 100%;
                    font-size: vw1(18);
                    cursor: pointer;
                }

                .landName:hover {
                    color: #00e5fd;
                }

                .landVal {
                    line-height: vh(110);
                    width: 100%;
                    font-size: vw1(18);
                }

                .yColor {
                    color: #00E5FD;
                }

                .rColor {
                    color: #00E5FD;
                }
            }
        }

        .right-detail-info {
            position: fixed;
            width: vw1(850);
            height: vh(180);
            color: #02C7FF;
            font-family: '微软雅黑';
            // text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
            padding-top: vh(20);
            right: vw1(1450);
            /* top: 80px; */
            top: vh(100);
            background-color: rgba(5, 26, 37, 0.3);
            border-radius: 15px;
            font-size: vw1(22);
            line-height: vh(30);
            padding-left: 8px;
            padding-right: 8px;
            transition: top 1s;
        }

        .geoIntro {
            width: vw1(880);
            margin-top: vh(28);

            .geoIntroTitle {
                display: flex;
                margin-bottom: vh(30);

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .geoCarousel {
                width: vw1(880);
                height: vh(340);
                // background :pink;
                border: 1px solid #0c4259;
                padding-top: vh(30);
                padding-bottom: vh(30);
                padding-left: vw1(30);
                padding-right: vw1(30);

                .carouseContent {
                    display: flex;
                    .carouseImg {
                        flex-shrink: 0;
                        width: vw1(422);
                        height: vh(250);
                        margin-right: vw1(20);
                        img {
                            width: vw1(422);
                            height: vh(270);
                        }
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        margin-top: vh(10);
                        width: vw1(370);
                        height: vh(240);
                        font-size: vw1(20);
                        // padding: vh(10) vw1(5);
                        line-height: vh(50);
                        display :block;
                        // background:pink;
                    }
                }
            }
        }
    }
}
</style>